<template>
  <div>
    <div>
      <el-descriptions class="margin-top" title="项目详情" :column="2" size="medium" border>
        <template slot="extra">
          <el-button plain size="small" @click="showDepartment = !showDepartment"><span
              v-if="showDepartment">隐藏</span><span v-else>显示</span>部门
          </el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            项目名称
          </template>
          <strong>2022年九合数科年末考核</strong>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            项目审核人
          </template>
          <span>齐虹</span>
          <el-tag v-if="showDepartment" type="info" size="mini" effect="plain">综合事务部</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            开始时间
          </template>
          2022-11-21 08:10:00
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            截止时间
          </template>
          2022-11-25 18:00:00
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            考核说明
          </template>
          考核说明考核说明考核说明考核说明考核说明考核<br>
          说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明<br>
          明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明<br>
          明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明考核说明
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <h4>考核组</h4>
      <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style="width: 100%; margin-top: 20px">
        <el-table-column
            prop="targetGroupName"
            label="考核组"
            width="150">
        </el-table-column>
        <el-table-column
            prop="targetUserList"
            label="考核组组员"
            width="200">
          <template slot-scope="scope">
            <template v-for="(name, i) in scope.row.targetUserList">
              <span>{{ name.name }}</span>
              <el-tag v-if="showDepartment" type="info" size="small" effect="plain">{{ name.department }}</el-tag>
              <span v-if="i != scope.row.targetUserList.length - 1">、</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column
            prop="sourceGroupName"
            label="打分组"
            width="150">
        </el-table-column>
        <el-table-column
            prop="weight"
            label="权重"
            align="center"
            width="60">
        </el-table-column>

        <el-table-column
            prop="sourceUserList"
            label="打分组组员">
          <template slot-scope="scope">
            <template v-for="(name, i) in scope.row.sourceUserList">
              <span>{{ name.name }}</span>
              <el-tag v-if="showDepartment" type="info" size="small" effect="plain">{{ name.department }}</el-tag>
              <span v-if="i != scope.row.sourceUserList.length - 1">、</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProjectPreview",
  data() {
    return {
      showDepartment: false,
      tableData: [{
        targetGroupName: '中层领导组',
        rowspan: 2,
        colspan: 1,
        targetUserList: [{name: '李良奎', department: '技术保障部'}, {name: '齐虹', department: '综合事务部'}],
        sourceGroupName: '公司领导',
        weight: 0.8,
        sourceUserList: [{name: '徐锋', department: '公司领导'}, {name: '彭昕', department: '公司领导'}]
      },
        {
          targetGroupName: '中层领导组',
          rowspan: 0,
          colspan: 0,
          targetUserList: [{name: '李良奎', department: '技术保障部'}, {name: '齐虹', department: '综合事务部'}, {name: '徐琴晴', department: '运营部'}],
          sourceGroupName: '员工',
          weight: 0.2,
          sourceUserList: [{name: '肖欣', department: '技术保障部'}, {name: '王鹏宇', department: '运营部'}, {name: '袁翠荣', department: '综合事务部'}, {name: '张晓敏', department: '综合事务部'}]
        },
        {
          targetGroupName: '技术部员工组',
          rowspan: 3,
          colspan: 1,
          targetUserList: [{name: '肖欣', department: '技术保障部'}, {name: '袁宏明', department: '技术保障部'}],
          sourceGroupName: '直属领导',
          weight: 0.6,
          sourceUserList: [{name: '李良奎', department: '技术保障部'}]
        },
        {
          targetGroupName: '技术部员工组',
          rowspan: 0,
          colspan: 0,
          targetUserList: [{name: '肖欣', department: '技术保障部'}, {name: '袁宏明', department: '技术保障部'}],
          sourceGroupName: '其他部门领导',
          weight: 0.3,
          sourceUserList: [{name: '徐锋', department: '公司领导'}, {name: '彭昕', department: '公司领导'}, {name: '齐虹', department: '综合事务部'}, {name: '徐琴晴', department: '运营部'}]
        },
        {
          targetGroupName: '技术部员工组',
          rowspan: 0,
          colspan: 0,
          targetUserList: [{name: '肖欣', department: '技术保障部'}, {name: '袁宏明', department: '技术保障部'}],
          sourceGroupName: '员工',
          weight: 0.1,
          sourceUserList: [{name: '王鹏宇', department: '运营部'}, {name: '袁翠荣', department: '综合事务部'}, {name: '张晓敏', department: '综合事务部'}]
        },
        {
          targetGroupName: '运营部员工组',
          rowspan: 3,
          colspan: 1,
          targetUserList: [{name: '王鹏宇', department: '运营部'}],
          sourceGroupName: '直属领导',
          weight: 0.6,
          sourceUserList: [{name: '徐琴晴', department: '运营部'}]
        },
        {
          targetGroupName: '运营部员工组',
          rowspan: 0,
          colspan: 0,
          targetUserList: [{name: '王鹏宇', department: '运营部'}],
          sourceGroupName: '其他部门领导',
          weight: 0.3,
          sourceUserList: [{name: '徐锋', department: '公司领导'}, {name: '彭昕', department: '公司领导'}, {name: '齐虹', department: '综合事务部'}, {name: '李良奎', department: '技术保障部'}]
        },
        {
          targetGroupName: '运营部员工组',
          rowspan: 0,
          colspan: 0,
          targetUserList: [{name: '王鹏宇', department: '运营部'}],
          sourceGroupName: '员工',
          weight: 0.1,
          sourceUserList: [{name: '王鹏宇', department: '运营部'}, {name: '袁翠荣', department: '综合事务部'}, {name: '张晓敏', department: '综合事务部'}]
        },
      ]
    };
  },
  methods: {
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex <= 1) {
        return {
          rowspan: row.rowspan,
          colspan: row.colspan
        };
      }
    }
  }
}
</script>

<style scoped>

</style>
